<template>
  <t-dialog v-model:visible="visible" attach="#app" header="修改用户" :confirm-btn="{
        content: '修改',
      }" @confirm="submit" @close="closeDialog">
    <template #body>
      <div>
        <t-form ref="ruleForm" :data="data" :rules="formRules" :label-width="60">
          <t-form-item label="账号" name="account">
            <t-input readonly v-model="data.account" />
          </t-form-item>
          <t-form-item label="姓名" name="username">
            <t-input v-model="data.username" />
          </t-form-item>
          <t-form-item label="性别" name="sex">
            <t-radio-group v-model="data.sex">
              <t-radio value="男">男</t-radio>
              <t-radio value="女">女</t-radio>
            </t-radio-group>
          </t-form-item>
          <t-form-item label="年龄" name="age">
            <t-input v-model="data.age" />
          </t-form-item>
          <t-form-item label="类型" name="type">
            <t-radio-group v-model="data.type">
              <t-radio :value="0">学生</t-radio>
              <t-radio :value="1">教师</t-radio>
              <t-radio :value="2">领导</t-radio>
              <t-radio disabled :value="3">管理员</t-radio>
            </t-radio-group>
          </t-form-item>
        </t-form>
      </div>
    </template>
  </t-dialog>
</template>
<script setup lang="ts">
import {ref, defineEmits} from "vue";
import {updateUser} from "../api/User";
import {MessagePlugin} from "tdesign-vue-next";
// 弹框设置默认值
const visible = ref<boolean>(false);
interface dataType{
  id: string | number;
  account: string;
  username: string;
  sex: string;
  age: string | number;
  type: string | number;
}
// 父组件方法
const emit = defineEmits(['callback']);
// 需要修改的form表单
const data = ref<dataType>({
  id: '',
  account: '',
  username: '',
  sex: '',
  age: '',
  type: '',
});
// 校验规则
const formRules = ref({
    account: [
      { required: true, message: '请输入账号' },
      { min: 5, message: '账号不允许少于5个字符' },
      { max: 20, message: '账号不允许超过20个字符' },
    ],
    username: [
      { required: true, message: '请输入姓名' },
      { min: 4, message: '姓名不允许少于2个字' },
      { max: 12, message: '姓名不允许超过5个字' },
    ],
    age: [
      { required: true, message: '请填写年龄' },
      { number: true, message: '请输入数字' },
    ],
    sex: [
      { required: true, message: '请选择性别' }
    ],
    type: [
      { required: true, message: '请选择类别' }
    ]
})

interface openType {
  id: number;
  account: string;
  username: string;
  sex: string;
  age: number;
  type: number;
}
const ruleForm = ref();
// 打开弹框
function open(params:openType):void {
  visible.value = true;
  data.value = params;
}
// 提交修改
const submit = async () => {
  const validate = await ruleForm.value.validate();
  if(typeof validate === "boolean"){
    const result = await updateUser(data.value);
    MessagePlugin.success(result.message);
    visible.value = false;
    emit('callback');
  }
}
// 关闭弹框事件
const closeDialog = () => {
  ruleForm.value.reset();
  emit('callback');
}
defineExpose({open})
</script>
<style lang="less">

</style>
